import VueRouter from "vue-router";
import About from '../pages/About'
import Home from '../pages/Home'
import Message from '../pages/Message'
import News from '../pages/News'
import Detail from '../pages/Detail'

export default new VueRouter({
    routes: [
        {
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            children: [
                {
                    path: 'news',
                    component: News
                },
                {
                    path: 'message',
                    component: Message,
                    children: [
                        {
                            name: 'detail',
                            path: 'detail/:id/:title',//params参数占位符
                            component: Detail,
                        }
                    ]
                },
            ]
        },
    ]
})

/* 
1.路由
    一组映射关系，需要路由器进行管理
2.基本使用
    npm i vue-router@3 // 适用vue2
    Vue.use(VueRouter)
    配置router/index.js
        const router = new VueRouter({
            routes: [
                {
                    path: '/about',
                    component: About
                },
                {
                    path: '/home',
                    component: Home
                },
            ]
        })
        暴露一下router
    组件中使用 <router-link></router-link>
        指定内容区 <router-view></router-view>
        实现高亮 active-class属性
2.多级路由
        配置时使用children
        组建中使用 to="/home/news" // 使用全路径
3.query参数
         <!-- 字符串写法 -->
        <!-- <router-link :to="`/home/message/detail?id=${msg.id}&title=${msg.title}`">{{ msg.title }}</router-link> -->
        <!-- 对象写法 -->
        <router-link 
            :to="{
                path:'/home/message/detail',
                query:{
                    id:msg.id,
                    title:msg.title
                }
            }">
            {{ msg.title }}
        </router-link>
        组件接收 $route.query.id
4.params参数
        <!-- params字符串写法 -->
        <!-- <router-link :to="`/home/message/detail/${msg.id}/${msg.title}`">{{ msg.title }}</router-link> -->
        <!-- params对象写法 -->
        <router-link 
            :to="{
                name:'detail',//这里使用命名路由
                params:{
                    id:msg.id,
                    title:msg.title
                }
            }">
            {{ msg.title }}
        </router-link>
        接收 $route.params.id
*/